<!-- 子组件，用于测试验证 -->
<template>
  <q-dialog transition-hide="none" transition-show="none" v-model="dlgModelValue">
    <q-card style="max-width: 800px">
      <q-card-section class="q-pa-sm">
        <div class="text-h6">
          组件验证测试
        </div>
      </q-card-section>
      <div class="q-px-sm q-pb-sm">
        <div class="row q-col-gutter-sm">
          <div class="col-12">
            <span>field1</span>
            <easy-input v-model="$d.form.field1" :error="v$.field1.$error" :error-message="e$(v$.field1.$errors)" autofocus />
          </div>
          <div class="col-12">
            <span>field2</span>
            <easy-input v-model="$d.form.field2" :error="v$.field2.$error" :error-message="e$(v$.field2.$errors)" />
          </div>
        </div>
      </div>
      <q-card-actions align="right">
        <q-btn @click="confirm" color="primary" label="确定" />
        <q-btn color="primary" label="关闭" outline unelevated v-close-popup />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
export default {
  name: 'ChildCompForValTest',
}
</script>

<script lang="ts" setup>

import {reactive,computed} from 'vue'
import useVuelidate from '@vuelidate/core'
import EasyInput from '../../lib/components/EasyInput.vue'

interface PropsDef {
  value?: boolean,
}

let props = withDefaults(defineProps<PropsDef>(), {
  value: false,
})

const emit = defineEmits<{
  (e: 'update:modelValue', modelValue: boolean): void
}>()

const dlgModelValue = computed({
  get() {
    return props.value
  },
  set(val: boolean) {
    emit('update:modelValue', val)
  },
})

let $d = reactive({
    form: {
      field1: '',
      field2: '',
    },
  },
)

const validators = $f.validators
const rules = {
  field1: {
    required: validators.required,
  },
  field2: {
    required: validators.required,
  },
}

const v$ = useVuelidate(rules, $d.form, {$autoDirty: true})

const confirm = () => {
  void v$.value.$validate().then(valRes=>{
    console.log(valRes)
  })
}

const e$ = $f.getFieldErrStr

</script>
